<script lang="ts" setup>
import { defineProps } from 'vue'
import type { RankingData } from '@/typings'
import { timeAbbreviation } from '@/utils/time'


const props = defineProps<{
    list: RankingData,
}>()

const list = props.list

</script>

<template>
    <!-- pic play video_review title -->
    <div class="relative inline-block w-full">
        <img :src="list.pic + '@480w_270h_1c'" alt="" class=" rounded-sm w-full">
        <div style="background: linear-gradient(0deg,rgba(0,0,0,.85),transparent); width: 100%;"
            class=" flex justify-between absolute bottom-0 left-0 text-white py-1 px-1.5 text-xs">
            <div class=" flex items-center "><span class="iconfont icon-bofangshu mr-1.5"></span><span>{{
                    timeAbbreviation(list.play) }}</span></div>
            <div class=" flex items-center "><span class="iconfont icon-danmushu  mr-1.5"></span><span>{{
                    timeAbbreviation(list.video_review) }}</span></div>
        </div>

    </div>
    <div>
        <p class="w-12/12 overflow-hidden text-ellipsis text-xs mt-1.5 text-black" style="-webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; width: 100%;">{{ list.title }}
        </p>
    </div>
</template>